import RangeSlider from '../slider.vue' //区间
import car from '../carbeauty-list-item.vue' //瀑布流
import brandList from '@/components/filter-list/brand.vue' //品牌
import defaultImg from '@/components/defaultImg/defaultImg' //默认图
export default {
	props: ['rangeValues', 'height', 'navHight', 'enable', 'index'],
	data() {
		return {
			brandTotal: 0,
			Brandlist: [],
			pageLoading: false,
			headerHight: 0,
			refRecommend: ['recommend0', 'recommend1', 'recommend2', 'recommend3'],
			loadStatus: ['loading', 'loading', 'loading', 'loading'], // 列表加载更多
			// 车品列表当前页码
			pageNows: [1, 1, 1, 1],
			// carlist: [],
			//车源列表
			carlist: {
				0: [],
				1: [],
				2: [],
				3: []
			},
			//品牌
			brandId: ['', '', '', ''],
			/* 推荐 */
			recommendValue: [0, 0, 0, 0], //智能排序
			brandNmae: ['', '', '', ''], //品牌名

			//一成首付
			paymentsMax: [null, null, null, null],
			paymentsMin: [null, null, null, null],
			paymentsPriceValue: [-1, -1, -1, -1], //首付排序
			isReset: true,
			//记过颜色
			activeItem: {
				'font-size': '32rpx'
			},
			carNmber: 0, //总条数
			isHeight: 0, //h5吸顶高度
			defaultImg: false, //默认图
			isWidth: 20, //滚动的宽度
			tabTop: false, // tab吸顶时触发的开关
			stickyJudgment: false, //筛选置顶判断
			sortTitle: ['智能排序', '智能排序', '智能排序', '智能排序'],
			screenTitle: '筛选',
			paymentTitle: ['首付', '首付', '首付', '首付'],
			mounthlyTitle: ['月供', '月供', '月供', '月供'],

			carTypeId: 0,
			//购车类型
			buyTypeId: 0,
			buyType: [{
					id: 1,
					name: '一成首付'
				},
				{
					id: 2,
					name: '以租代售'
				},
				{
					id: 3,
					name: '巨能降'
				}
			],
			slideWidth: 636,
			slideHeight: 80,
			barHeight: 20,
			slideBlockSize: 44,
			slideMin: 0,
			slideMax: 70,
			isLiveMode: true,
			step: 10,
			// rangeValues3: [0, 70],
			//选项卡列表
			swiperList: [{
					name: '推荐'
				},
				{
					name: '1成首付'
				},
				{
					name: '以租代售',
				},
				{
					name: '巨能降',
				}
			],
			swiperCurrent: 0, //swiper当前页
			tabCurrent: 0, //tabs当前页

			//推荐智能排序
			tjSort: [{
					id: 0,
					name: '智能排序'
				},
				{
					id: 1,
					name: '销量多'
				},
				{
					id: 2,
					name: '距离近'
				},
				{
					id: 4,
					name: '7迈自营'
				},
				{
					id: 3,
					name: '关注高'
				},
			],
			//1成智能排序（通用）
			paymentsSort: [{
					id: 0,
					name: '智能排序'
				},
				{
					id: 1,
					name: '首付最低'
				},
				{
					id: 2,
					name: '月供最低'
				},
			],

			// 巨能降排序
			downList: [{
					id: 0,
					name: '智能排序'
				},
				{
					id: 1,
					name: '幅度最高'
				},
			],
			/*一成首付*/
			paymentValue: 0,
			//首付排序
			paymentsPrice: [{
					id: 0,
					name: '价格不限',
					min: null,
					max: null
				},
				{
					id: 1,
					name: '0首付',
					min: 0,
					max: 0
				},
				{
					id: 2,
					name: '5千以内',
					min: 0,
					max: 4999
				},
				{
					id: 3,
					name: '5千-1万',
					min: 5000,
					max: 10000
				},
				{
					id: 4,
					name: '1-2万',
					min: 10000,
					max: 20000
				},
				{
					id: 5,
					name: '2-3万',
					min: 20000,
					max: 30000
				},
				{
					id: 6,
					name: '3-4万',
					min: 30000,
					max: 40000
				},
				{
					id: 7,
					name: '4-5万',
					min: 40000,
					max: 50000
				},
				{
					id: 8,
					name: '5-6万',
					min: 50000,
					max: 60000
				},
				{
					id: 9,
					name: '6万以上',
					min: 60000,
					max: 0
				}
			],

			/* 以租代售*/
			comparisonValue: 0, //智能排序
			comparisonMounthlyValue: 0, //月供
			comparisonPriceValue: 0, //首付
			//月供排序
			mounthlyPrice: [{
					id: 0,
					name: '价格不限',
					min: 0,
					max: 0
				},
				{
					id: 1,
					name: '1千以内',
					min: 0,
					max: 999
				},
				{
					id: 2,
					name: '1-2千',
					min: 1000,
					max: 2000
				},
				{
					id: 3,
					name: '2-3千',
					min: 2000,
					max: 3000
				},
				{
					id: 4,
					name: '3-4千',
					min: 3000,
					max: 4000
				},
				{
					id: 5,
					name: '4-5千',
					min: 4000,
					max: 5000
				},
				{
					id: 6,
					name: '5-6千',
					min: 5000,
					max: 6000
				},
				{
					id: 7,
					name: '6千以上',
					min: 6000,
					max: 0
				},
			],
			mounthlyPriceValue: [-1, -1, -1, -1],
			mounthlyMin: [0, 0, 0, 0],
			mounthlyMax: [0, 0, 0, 0],

			/* 巨能降 */
			bigValue: 0, //智能排序激活值

			//首页banner
			banners: [{
					path: '/pages_common/pages_me/invitation/invitation',
					id: 0,
					img: 'https://files.yzsheng.com/client/index/banner/index1.jpg'
				},
				{
					path: '/pages_store/newCarStore/index/index?storeid=ecb14b970487480ead530cf77d8b065e', //线上的
					id: 1,
					img: 'https://files.yzsheng.com/client/index/banner/index2.jpg'
				}

			],
			bannerCurrent: 0, // banner当前
			bannerswiperCurrent: 0, //??
			//图标列表
			typeMenu: [{
					path: '/pages_buy_index/downPayment/downPayment',
					imgSrc: 'iconyichengshoufu',
					text: '一成首付'
				},
				{
					path: '/pages_buy_index/sale_rent/sale_rent',
					imgSrc: 'iconyizudaishou',
					text: '以租代售'
				},
				{
					path: '/pages_buy_index/giant_nengjiang/giant_nengjiang',
					imgSrc: 'iconjinengjiang',
					text: '巨能降'
				},
				{
					path: '/pages_buy_index/brand_direct/brand_direct',
					imgSrc: 'iconpinpaizhigong',
					text: '品牌直供'
				},
				{
					path: '/pages_buy_index/condition/condition',
					imgSrc: 'icontiaojianxuanche',
					text: '条件选车'
				}
			],
			brandMenu: [{
					imgSrc: '',
					text: '奔驰'
				},
				{
					imgSrc: '',
					text: '宝马'
				},
				{
					imgSrc: '',
					text: '大众'
				},
				{
					imgSrc: '',
					text: '奔驰'
				},
				{
					imgSrc: '',
					text: '奔驰2'
				},
				{
					imgSrc: '',
					text: '奔驰'
				}
			],
			priceMenu: [{
					id: 0,
					price: '10万以下',
					min: 0,
					max: 99999
				},
				{
					id: 1,
					price: '10-15万',
					min: 100000,
					max: 150000
				}, {
					id: 2,
					price: '15-20万以上',
					min: 150000,
					max: 200000
				}, {
					id: 3,
					price: '20万以上',
					min: 200000,
					max: 999999999
				},
			],
			isOpen: false,
			//价格区间
			priceSection: [{
					id: 0,
					preice: 0,
				},
				{
					id: 2,
					preice: 10,
				},
				{
					id: 3,
					preice: 20,
				},
				{
					id: 4,
					preice: 30,
				},
				{
					id: 5,
					preice: 40,
				},
				{
					id: 6,
					preice: 50,
				},
				{
					id: 7,
					preice: 60,
				},
				{
					id: 8,
					preice: '不限',
				},
			],

			// loadStatus: 'loading',
			//懒加载
			triggered: false,

			carIndex: 1,
			//所有品牌
			brandAllList: [],
			newMaxValue: 0, //监听的最大值
			newtext: '不限',
			rangeValues3: [0, 70],
		}
	},
	computed: {
		stickyHeight() {
			return Math.floor(Number(this.navHight) / (uni.upx2px(Number(this.navHight)) / Number(this.navHight))) - 1
		}
	},
	watch: {
		rangeValues(val) {
			console.log(val)
			this.defaultImg = false
			this.carlist[this.swiperCurrent] = []
			this.pageNows[this.swiperCurrent] = 1
			// this.carIndex = 1
			// this.carlist = []
			this.buyTypeId = val.buyTypeId //购车类型
			this.carTypeId = val.carTypeId //购车类型(有图)
			// 区间值
			if (val.rangeValues[1] === 70) {
				this.newMaxValue = 0

			} else {
				this.newMaxValue = val.rangeValues[1]

			}
			this.rangeValues3[0] = val.rangeValues[0]
			this.buyList()

		},
	},
	filters: {
		buyType(data) {
			let text = ''
			switch (Number(data)) {
				case 1:
					text = '1成首付'
					break
				case 2:
					text = '以租代售'
					break
				case 3:
					text = '一口价'
					break
				default:
					text = ''
					break
			}
			return text
		},
		carBodyModel(data) {
			let text = ''
			switch (Number(data)) {
				case 1:
					text = '两厢轿车'
					break
				case 2:
					text = '三厢轿车'
					break
				case 3:
					text = 'SUV'
					break
				case 4:
					text = 'MPV'
					break
				case 5:
					text = '微面'
					break
				case 6:
					text = '皮卡'
					break
				default:
					text = ''
					break
			}
			return text
		}
	},
	created() {
		this.buyList()
		this.brandAll()
		this.GetCarBrandList()
	},
	methods: {
		fixed() {
			this.tabTop = true
		},
		getHight() {
			//获取导航栏高度
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this)
				query.select('.content').boundingClientRect(data => {
					this.headerHight = data.height
					// console.log(data.height,'高度')
				}).exec()
			})

		},
		//首页
		async buyList() {
			this.loadStatus[this.swiperCurrent] = 'loading'
			try {
				let data = {
					'pageIndex': this.pageNows[this.swiperCurrent],
					'pageSize': 10,
					'sorting': this.recommendValue[this
					.swiperCurrent], // 0：智能，1：销量最高，2：距离最近，3：关注最高，4：7迈自营，1成首付 ，1成首付： 0：智能，1：首付最低，2：月供最低
					'brandId': String(this.brandId[this.swiperCurrent]), //品牌id
					'lowprice': Number(this.rangeValues3[0]) * 10000, //价格区间低 ,价格幅度筛选的最低价
					'highprice': Number(this.newMaxValue) * 10000, //	价格区间高，价格幅度筛选的最低价
					'cartype': this.buyTypeId, //购车类型0没有1:一层首付2：以租代售3：巨能降
					'type': this.swiperCurrent, //新车推荐0，1低首付，2以租代售,3 一口价
					'lowPricetyoe': this.paymentsMin[this.swiperCurrent], //一成首付最低价：默认传null
					'highPricetyoe': this.paymentsMax[this.swiperCurrent], //一成首付最高价：默认传null
					'lowMonthlyPayments': this.mounthlyMax[this.swiperCurrent] || null, //月供最低价：默认传null
					'highMonthlyPayments': this.mounthlyMin[this.swiperCurrent] || null, //月供最低价：默认传null
					'carBodyModel': this.carTypeId
				}
				const res = await this.$api.buyCar.buyHome(data)
				this.carNmber = res.data.total
				this.carlist[this.swiperCurrent] = [...this.carlist[this.swiperCurrent], ...res.data.list]
				this.pageLoading = true
				let length = res.data.list.length
				uni.stopPullDownRefresh()
				uni.hideLoading()
				if (this.carlist[this.swiperCurrent].length === 0) {
					this.defaultImg = true
				} else {
					this.defaultImg = false
				}
				if (res.data.total <= 10) {
					this.loadStatus[this.swiperCurrent] = 'nomore'
				} else {
					this.moreStatus(length !== 0 ? 'loading' : 'nomore')
				}
				this.$nextTick(() => {
					//#ifndef MP-WEIXIN
					this.getHight()
					//#endif
					this.$emit('success', this.headerHight)
				})
				if (length === 0) return false
				this.pageNows[this.swiperCurrent] += 1
			} catch (e) {
				this.$nextTick(() => {
					//#ifndef MP-WEIXIN
					this.getHight()
					//#endif
				})
				this.pageLoading = true
				uni.hideLoading()
				uni.stopPullDownRefresh()
			}
		},
		// 通用品牌排序
		brandListChange(id, name) {
			this.carlist[this.swiperCurrent] = []
			this.pageNows[this.swiperCurrent] = 1
			this.brandId[this.swiperCurrent] = id
			this.brandNmae[this.swiperCurrent] = name.brand
			this.buyList()
		},
		//推荐删除
		delrangeValues() {
			this.newMaxValue = 0
			this.rangeValues3 = [0, 70]
			this.carlist[this.swiperCurrent] = []
			this.pageNows[this.swiperCurrent] = 1
			this.defaultImg = false
			this.$u.debounce(this.buyList, 500)
		},
		delModel() {
			this.carlist[this.swiperCurrent] = []
			this.pageNows[this.swiperCurrent] = 1
			this.defaultImg = false
			this.carTypeId = 0
			this.$u.debounce(this.buyList, 500)
		},
		//购车类型
		delType() {
			this.carlist[this.swiperCurrent] = []
			this.pageNows[this.swiperCurrent] = 1
			this.defaultImg = false
			this.buyTypeId = 0
			this.$u.debounce(this.buyList, 500)
		},

		// 重置(推荐，巨能降)
		reset() {
			this.carlist[this.swiperCurrent] = []
			this.pageNows[this.swiperCurrent] = 1
			this.brandNmae[this.swiperCurrent] = ''
			this.brandId[this.swiperCurrent] = ''
			this.newMaxValue = 0
			this.rangeValues3 = [0, 70]
			this.buyTypeId = 0
			this.carTypeId = 0
			this.defaultImg = false
			this.tapscroll()
			this.$u.debounce(this.buyList, 500)
		},

		//删除品牌
		delBrand() {
			this.defaultImg = false
			this.carlist[this.swiperCurrent] = []
			this.pageNows[this.swiperCurrent] = 1
			this.brandId[this.swiperCurrent] = ''
			this.brandNmae[this.swiperCurrent] = ''
			this.$u.debounce(this.buyList, 500)
		},

		// 一成首付以租代售重置
		resetPament() {
			this.carlist[this.swiperCurrent] = []
			this.pageNows[this.swiperCurrent] = 1
			this.defaultImg = false
			//排序标题
			this.sortTitle[this.swiperCurrent] = '智能排序'
			this.mounthlyTitle[this.swiperCurrent] = '月供'
			this.paymentTitle[this.swiperCurrent] = '首付'
			//品牌
			this.brandId[this.swiperCurrent] = ''
			this.brandNmae[this.swiperCurrent] = ''
			//首付
			this.paymentsPriceValue[this.swiperCurrent] = -1
			this.paymentsMin[this.swiperCurrent] = null
			this.paymentsMax[this.swiperCurrent] = null
			//月供
			this.mounthlyPriceValue[this.swiperCurrent] = -1
			this.mounthlyMin[this.swiperCurrent] = 0
			this.mounthlyMax[this.swiperCurrent] = 0
			//智能
			this.recommendValue[this.swiperCurrent] = 0

			this.tapscroll()
			this.$u.debounce(this.buyList, 500)
		},
		delPanment() {
			this.carlist[this.swiperCurrent] = []
			this.pageNows[this.swiperCurrent] = 1
			this.defaultImg = false
			this.paymentTitle[this.swiperCurrent] = '首付'
			this.paymentsMin[this.swiperCurrent] = 0
			this.paymentsMax[this.swiperCurrent] = 0
			this.paymentsPriceValue[this.swiperCurrent] = -1
			this.$u.debounce(this.buyList, 500)
		},
		delMouth() {
			this.carlist[this.swiperCurrent] = []
			this.pageNows[this.swiperCurrent] = 1
			this.defaultImg = false
			this.mounthlyTitle[this.swiperCurrent] = '月供'
			this.mounthlyMin[this.swiperCurrent] = 0
			this.mounthlyMax[this.swiperCurrent] = 0
			this.mounthlyPriceValue[this.swiperCurrent] = -1
			this.$u.debounce(this.buyList, 500)
		},

		//点击加载更多
		clickLoadMore() {
			if (this.swiperCurrent === 0) {
				this.buyList()
			} else if (this.swiperCurrent === 1) {
				this.buyList()
			} else if (this.swiperCurrent === 2) {
				this.buyList()
			} else if (this.swiperCurrent === 3) {
				this.buyList()
			}
		},
		//tabs切换
		change(index) {
			this.swiperCurrent = index
			this.tapscroll()
			// this.carlist[i] = []
			// this.pageNows[i]=1
			// this.carlist = []
			// this.carIndex = 1
			this.defaultImg = false
		},
		//swiper切换
		listSwitch(index) {
			let i = index.detail.current
			this.swiperCurrent = index.detail.current
			/*    //标题
			// this.sortTitle = '智能排序'
			// this.mounthlyTitle = '月供'
			// this.paymentTitle = '首付'
			//筛选
			// this.newMaxValue = 0
			// this.carTypeId = 0
			// this.buyTypeId = 0
			// this.rangeValues3 = [0, 70],
			//品牌
			// this.brandId = ''
			// this.brandNmae = ''
			//首付月供
			// this.paymentsMin = 0
			// this.paymentsMax = 0
			// this.mounthlyMin = 0
			// this.mounthlyMax = 0 */
			//智能
			this.defaultImg = false
			if (this.carlist[i].length === 0) {
				uni.showLoading({
					title: '加载中'
				})
				this.$u.debounce(this.buyList, 500)
			}
		},

		//条件选车
		goCondition(item) {
			console.log(item)
			let list = JSON.stringify(item)
			uni.navigateTo({
				url: '/pages_buy_index/condition/condition?list=' + list
			})
		},
		//品牌跳转条件选车
		onBrand(item) {
			let list = JSON.stringify(item)
			uni.navigateTo({
				url: '/pages_buy_index/condition/condition?list=' + list
			})
		},

		// 加载前、中、后
		moreStatus(status) {
			this.loadStatus[this.swiperCurrent] = status
		},
		//品牌平级
		async brandAll() {
			try {
				const res = await this.$api.jsonData.brandAll()

				var brandfive = []
				brandfive[0] = res.data[7]
				brandfive[1] = res.data[16]
				brandfive[2] = res.data[23]
				brandfive[3] = res.data[34]
				brandfive[4] = res.data[113]
				this.brandAllList = brandfive
			} catch (e) {

			}
		},

		//推荐下拉加载
		scrolltolower() {
			if (this.loadStatus[this.swiperCurrent] !== 'nomore') {
				this.buyList()
			}

		},

		//链接跳转
		goLink(page) {
			if (page === '#') {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				})
			} else {
				uni.navigateTo({
					url: page
				})
			}
		},
		goBannber(url) {
			let token = uni.getStorageSync('token')
			if (!token) {
				this.$u.toast('请登录！')
				this.$u.debounce(this.login, 1000)
			} else {
				uni.navigateTo({
					url: url
				})
			}
		},
		//品牌图标跳转
		goPage(url) {
			uni.navigateTo({
				url: url
			})
		},

		/*-------- 以租代售 --------*/
		closeComparison() {
			this.$refs.recommend2.close()
		},
		//跳转登录
		login() {
			uni.setStorage({
				key: 'launchFlag',
				data: false,
			})
			uni.navigateTo({
				url: '/pages_logins/login/login'
			})
		},
		//跳转页面
		goPages(url) {
			let token = uni.getStorageSync('token')
			if (!token) {
				this.$u.toast('请登录！')
				this.$u.debounce(this.login, 1000)
			} else {
				uni.navigateTo({
					url: url
				})
			}
		},
		// 选择排序排序置顶
		tapscroll() {
			// 获取节点到顶部的距离
			const query = uni.createSelectorQuery().in(this)
			console.log(query)
			query
				.select('.main-header')
				.boundingClientRect(data => {
					console.log('得到布局位置信息', data)
					// console.log('节点离页面顶部的距离为' + data.top)
					// 获取节点到顶部的距离
					uni.pageScrollTo({
						duration: 100,
						scrollTop: data.height + 20
					})
				})
				.exec()
			// uni.pageScrollTo({
			//   duration: 300,
			//   scrollTop: 500
			// })
			this.stickyJudgment = true
		},

		/*-------- 巨能降 --------*/
		closeBigDrop() {
			this.$refs.recommend3.close()
		},

		/* --------推荐-------- */
		// 推荐关闭弹出列表的部分
		closePopupSection() {
			this.$refs.recommend0.close()
		},

		// 智能排序
		recommend(id, item) {
			this.sortTitle[this.swiperCurrent] = item.name
			this.carlist[this.swiperCurrent] = []
			this.pageNows[this.swiperCurrent] = 1
			this.recommendValue[this.swiperCurrent] = id
			this.$u.debounce(this.buyList, 500)
			if (this.swiperCurrent === 0) {
				this.$refs.recommend0.close()
			} else if (this.swiperCurrent === 1) {
				this.$refs.recommend1.close()
			} else if (this.swiperCurrent === 2) {
				this.$refs.recommend2.close()
			} else if (this.swiperCurrent === 3) {
				this.$refs.recommend3.close()
			}

		},
		/* --------一成首付-------- */
		closePayment() {
			this.$refs.recommend1.close()
		},
		//通用首付
		paymentsSrot(item) {
			this.paymentTitle[this.swiperCurrent] = item.name
			this.carlist[this.swiperCurrent] = []
			this.pageNows[this.swiperCurrent] = 1
			this.paymentsMin[this.swiperCurrent] = item.min
			this.paymentsMax[this.swiperCurrent] = item.max
			this.paymentsPriceValue[this.swiperCurrent] = item.id
			this.$u.debounce(this.buyList, 500)
			if (this.swiperCurrent === 1) {
				this.$refs.recommend1.close()
			} else if (this.swiperCurrent === 2) {
				this.$refs.recommend2.close()
			}
		},
		//通用月供
		mounthlySort(item) {
			this.carlist[this.swiperCurrent] = []
			this.pageNows[this.swiperCurrent] = 1
			this.mounthlyTitle[this.swiperCurrent] = item.name
			this.mounthlyMin[this.swiperCurrent] = item.min
			this.mounthlyMax[this.swiperCurrent] = item.max
			this.mounthlyPriceValue[this.swiperCurrent] = item.id
			this.$u.debounce(this.buyList, 500)
			if (this.swiperCurrent === 1) {
				this.$refs.recommend1.close()
			} else if (this.swiperCurrent === 2) {
				this.$refs.recommend2.close()
			}
		},

		//下拉关闭
		close(e) {
			this.isOpen = false

		},
		//下拉列表打开
		open(e) {
			if (e === 2 && this.swiperCurrent === 0) {
				uni.navigateTo({
					url: '/pages_common/pages_index/screen/screen'
				})
				this.$refs.recommend0.close()
			} else {
				this.tapscroll()
				this.isOpen = true
			}

		},

		// 监听banner滑动 ??
		swiperChange(e) {
			this.bannerswiperCurrent = e.detail.current
		},
		// 品牌接口请求
		async GetCarBrandList() {
			try {
				const res = await this.$api.common.GetCarBrandList()
				this.Brandlist = res.data
				if (this.Brandlist.length !== 0) {
					let sum = 0
					this.Brandlist.forEach(item => {
						item.data.forEach(c => {
							sum += c.carNumber
						})
					})
					this.brandTotal = sum
				} else {
					this.brandTotal = 0
				}
				// console.log(res.data, '品牌')
			} catch (err) {
				console.log(err)
			}
		},
	},
	//#ifdef MP-WEIXIN
	options: {
		styleIsolation: 'shared'
	},
	//#endif
	components: {
		car,
		brandList,
		RangeSlider,
		defaultImg
	}
}
